<template>
  <z-modal
    v-bind="modalOption"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model layout="horizontal" labelAlign="right" ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="form" :rules="validatorRules">
        <a-row>
          <a-col :span="8" >
            <a-form-model-item label="编码" prop="code">
              <a-input placeholder="请输入编码" :disabled="disableSubmit || editType !== 'add'" v-model.trim="form.code"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="名称" prop="name">
              <a-input placeholder="请输入名称" :disabled="disableSubmit" v-model.trim="form.name"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="字典(下拉)">
              <ZDictSelectTag :disabled="disableSubmit" :defaultValue="true" v-model="form.dict1" dictCode="MB_SYSTEM_YES_NO" />
              <!-- defaultValue 根据字典配置的默认值设置表单初始值 -->
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="字典(单选组件)">
              <ZDictSelectTag :disabled="disableSubmit" type="radio"  v-model="form.dict2" dictCode="MB_SYSTEM_YES_NO" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="数字框">
              <a-input-number class="!w-full" :disabled="disableSubmit" placeholder="请输入数字框" v-model="form.number"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="日期框">
              <a-date-picker class="!w-full" :disabled="disableSubmit" placeholder="请选择日期" v-model="form.date1"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="日期框(时分秒)">
              <a-date-picker class="!w-full" show-time :disabled="disableSubmit" placeholder="请选择日期" v-model="form.date2"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="文件上传">
              <z-upload v-model="form.fileList" ></z-upload>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item  label="文本框">
              <a-input :disabled="disableSubmit" type="textarea" v-model="form.memo"/>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </z-modal>
</template>

<script>
import ModalFormMixin from '@/mixins/ModalFormMixin'
import { duplicateCheck } from '@/services/common'
import debounce from 'lodash/debounce'
import ZDictSelectTag from '@/components/dict/ZDictSelectTag'
import ZUpload from '@/components/zz/ZUpload'
export default {
  name: 'AutoModal',
  mixins: [ModalFormMixin],
  components: {
    ZDictSelectTag,
    ZUpload
  },
  data() {
    return {
      validatorRules: {
        name: [{ required: true, message: '请输入名称!' }],
        code: [
          { required: true, message: '请输入编码!' },
          { validator: (rule, value, callback) => this.validateDuplicate(rule, value, callback), trigger: 'change' }
        ]
      },
      url: {
        add: '/sys/dict/add',
        edit: '/sys/dict/edit'
      },
      fileNames: []
    }
  },
  methods: {
    validateDuplicate: debounce(function(rule, value, callback) {
      if (!value) {
        callback()
      } else {
        duplicateCheck({
          tableName: 'mb_erp_inventory_item',
          column: 'item_code_',
          key: value,
          exclude: this.editType === 'edit' ? value : undefined
        }).then(res => {
          if (res.success) {
            res.result === 0 ? callback() : callback('编码已存在')
          } else {
            this.$message.warning(res.message)
          }
        })
      }
    }, 400)
  }
}
</script>
